<template>
	<div class="videoList">
		<div class="item" v-for="(item, i) in list" :key="i">
			<template v-if="item.type == 'video'">
				<xgplayer zhizhao :url="item.url"></xgplayer>
				<div class="desc top">
					<p>{{ item.name }}</p>
				</div>
			</template>
			<template v-else>
				<el-image style="width: 100%; height: 100%" class="image" v-if="item.type == 'img'" :src="item.url" :preview-src-list="[item.url]"></el-image>
				<div class="desc">
					<p>{{ item.name }}</p>
				</div>
			</template>
		</div>
		<pagePopVideo ref="pagePopVideo"></pagePopVideo>
	</div>
</template>

<script>
import pagePopVideo from '@/components/common/pagePopVideo';
import xgplayer from '@/components/common/xgplayer';
export default {
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		type: {
			type: String,
			default: 'video'
		}
	},
	name: 'videoList',
	components: { pagePopVideo, xgplayer },
	data() {
		return {};
	},
	computed: {},
	created() {},
	mounted() {},
	methods: {}
};
</script>

<style scoped lang="less">
.videoList {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	.item {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 226px;
		height: 163px;
		border-radius: 6px;
		overflow: hidden;
		cursor: pointer;
		.image {
			width: 100%;
			height: 100%;
		}
		// .play {
		// 	.fix-c-x();
		// 	top: 44px;
		// 	width: 30px;
		// 	height: 30px;
		// 	.jhover();
		// }
		.desc.top{
			z-index: 99999999999999999999999999999;
			// top: 0;
			// bottom: auto;
		}
		.desc {
			
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 14px;
			width: 100%;
			height: 47px;
			background: rgba(108, 108, 108, 0.67);
			border-radius: 0px 0px 6px 6px;
			font-weight: 500;
			font-size: 12px;
			color: #ffffff;
			line-height: 17px;
			text-align: left;
			font-style: normal;
		}
	}
}
</style>
